<template>
    <GameGround v-if="$store.state.pk.status ==='playing'" />
    <MatchGround v-if="$store.state.pk.status ==='matching'"/>
    <ResultBoard v-if="$store.state.pk.loser != 'none'" />
    <MoveBox v-if="$store.state.pk.status ==='playing' && windowWidth < 500"></MoveBox>
    <ChatBox >
    <div class="msg" v-for="msg in msgs" :key="msg.id">
        <div class="input-group input-group-sm mb-3" v-if="msg.userId === parseInt($store.state.user.id)">
        <input type="text" class="form-control" disabled :value="msg.content" aria-describedby="inputGroup-sizing-sm">
        <span class="input-group-text" id="inputGroup-sizing-sm"> {{ msg.userName }}</span>
        </div>

        <div class="input-group input-group-sm mb-3 talk" v-else>
        <span class="input-group-text" id="inputGroup-sizing-sm">{{msg.userName}}</span>
        <input type="text" class="form-control" disabled :value="msg.content" aria-describedby="inputGroup-sizing-sm">
        </div>
    </div>      
  </ChatBox>
    <div class="user-color" v-if="$store.state.pk.status === 'playing' && parseInt($store.state.user.id) === parseInt($store.state.pk.a_id)">您出生在左下角</div>
    <div class="user-color" v-if="$store.state.pk.status === 'playing' && parseInt($store.state.user.id) === parseInt($store.state.pk.b_id)">您出生在右上角</div>
</template>

<script>
import ChatBox from '../../../components/ChatBox.vue'
import GameGround from '../../../components/GameGround.vue'
import MatchGround from '../../../components/MatchGround.vue'
import ResultBoard from '../../../components/ResultBoard.vue'
import { useStore } from 'vuex';
import { ref } from 'vue';
import { onMounted,onUnmounted } from 'vue';
import MoveBox from '../../../components/MoveBox.vue'
export default{
    components:{
        GameGround,
        MatchGround,
        ResultBoard,
        ChatBox,
        MoveBox,
    },setup(){
        let msgs = ref([]);
        let socket = null;
        const store = useStore();
        store.commit("updateIsRecord", false);
        store.commit("updateLoser", "none");
        store.commit("updateOpponent",{
                username:"我的对手",
                photo:'https://cdn.acwing.com/media/article/image/2022/08/09/1_1db2488f17-anonymous.png'
            })
        onMounted(() => {        
            const socketUrl = `ws://127.0.0.1:3000/websocket/${store.state.user.token}/`
            socket = new WebSocket(socketUrl);

            store.commit("updateSocket",socket);
            socket.onopen = () =>{
                //建立连接执行
                socket.send(JSON.stringify({
                            event:"receive_msg",
            }));
            }
            socket.onmessage = msg => {
                const data = JSON.parse(msg.data);
                if(data.event === "msgs"){
                    msgs.value = data.msgs;
                }
                if(data.event === 'startMatching'){
                    //匹配成功
                    store.commit("updateOpponent",{
                        username:data.opponent_username,
                        photo:data.opponent_photo, 
                    });
                    store.commit("updateStatus","playing");
                    store.commit("updateMode","rank");
                    store.commit("updateGame",data.game);
                }else if(data.event === "move"){
                    const game = store.state.pk.game_object;           
                    const [snake0, snake1] = game.snakes;
                    snake0.set_direction(data.a_direction);
                    snake1.set_direction(data.b_direction);
                }else if(data.event === "result"){ 
                    const game = store.state.pk.game_object;           
                    const [snake0, snake1] = game.snakes;
                    if(data.loser === 'all' || data.loser === 'A'){
                        snake0.status = 'die';
                    }
                    if(data.loser === 'all' || data.loser === 'B'){
                        snake1.status = 'die';
                    }
                    store.commit("updateLoser", data.loser);
                }
            }

            socket.onclose = () => {
                
            }
        
        })
        onUnmounted(()=>{
            store.commit("updateStatus","matching");
            socket.close();
        })

        //计算窗口宽度
        const windowWidth = ref(window.innerWidth);
        console.log(windowWidth.value);
        return{
            msgs,
            windowWidth
        }
    }
    

}
</script>

<style scoped>
div.user-color{
    text-align: center;
    color: white;
    font-size: 30;
    font-weight: 600;
}
</style>